<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../../../yl/index.css" />
    <link rel="stylesheet" href="../../../style/index.css" />
    <title>事件信息处理</title>
    <style>
        .custom-tree-node {
            justify-content: flex-start;
        }

        .full-width-container {
            width: 100vw;
            margin-left: -20px;
            padding: 20px;
            box-sizing: border-box;
        }

        /* 容器基础样式 */
        .dia_y {
            width: 50%;
            margin: 1%;
            height: 400px;
            overflow-y: auto;
            overflow-x: hidden;
            position: relative;
            /* border: 1px solid #ccc; /* 加上边框更贴近示例 */
            border-radius: 4px;
        }

        .dia_z {
            /* border: 2px solid #ccc; */
            width: 50%;
            margin: 1%;
            height: 400px;
            overflow-y: auto;
            overflow-x: hidden;
            position: relative;
            /* 为子元素固定定位提供参考 */
        }

        .sticky-input {
            position: sticky;
            top: 0;
            /* 固定在容器顶部 */
            background: #fff;
            /* 背景色与容器一致 */
            z-index: 10;
            /* 确保输入框在树组件上方 */
            padding: 10px 0;
            /* 保持与原布局一致的间距 */
            border-bottom: 1px solid #eee;
            /* 可选：添加分隔线 */
        }

        .scroll-content {
            padding-top: 10px;
            /* 为固定输入框留出空间 */
            height: calc(100% - 50px);
            /* 滚动内容区域高度 */
        }

        /* 顶部统计栏 */
        .xuche {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 15px;
            background-color: #f5f7fa;
            border-bottom: 1px solid #e4e7ed;
        }

        /* 多选框列表区域 */
        .el-radio-group {
            padding: 10px 15px;
            display: block;
        }

        /* 调整多选框样式，让每个选项垂直分布更合理 */
        .el-radio {
            display: block;
            margin-bottom: 8px;
        }

        /* 滚动条样式（可选，让滚动条更美观） */
        .dia_y::-webkit-scrollbar {
            width: 6px;
        }

        .dia_y::-webkit-scrollbar-thumb {
            background-color: #c0c4cc;
            border-radius: 3px;
        }

        .dia_y::-webkit-scrollbar-track {
            background-color: #f5f7fa;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="title">
            <div>
                标题：<el-input v-model="page.value1" style="width: 200px" placeholder="请输入内容"></el-input>


                <el-button type="danger" style="margin-left: 1%;" @click="check">查询</el-button>
                <el-button style="width: 60px" @click="reset">重置</el-button>

            </div>
        </div>
        <div class="body">
            <div class="left">
                <el-tree ref="tree" default-expand-all :expand-on-click-node="false" id="tree"
                    :data-options="JSON.stringify({ 'TableName': 'complaints_categories', 'NodeCode': '','primary_key':'category_id' })"
                    style="max-width: 600px" :data="treeData" @node-click="handleNodeClick"
                    :props="{ label: 'category_name' }">
                    <template #default="{ node, data }">
                        <div class="custom-tree-node">
                            <el-icon v-if="node.level==1&&node.expanded">
                                <Folder-Opened />
                            </el-icon>
                            <el-icon v-else>
                                <Folder />
                            </el-icon>
                            <span>{{ node.label }}</span>
                            <!-- <div>
                                <el-button v-if="node.level != 2" type="primary" link @click="personalAdds(data)">+</el-button>
                                <el-button type="primary" link @click="handleEdits(data)">编辑</el-button>
                                <el-button style="margin-left: 4px" type="danger" link @click="remove(node, data)">删除</el-button>
                            </div> -->
                        </div>
                    </template>
                </el-tree>
            </div>
            <div class="right">
                <el-button class="zdtype" @click="handleOpenDialog">设置显示字段</el-button>
                <el-table id="table"
                    :data-options="JSON.stringify({ 'TableName': 'complaints','primary_key':'complaint_id'})"
                    height="450" v-loading="loading" ref="multipleTable" tooltip-effect="dark" :data="Tabletdata"
                    @selection-change="handleSelectionChange">
                    <el-table-column min-width="180" v-for="column in columns" :key="column.COLUMN_NAME"
                        :prop="column.COLUMN_NAME" :label="column.COLUMN_COMMENT">
                        <template v-slot="{row}">
                            <div
                                v-if="row[column.COLUMN_NAME].includes('.png')||row[column.COLUMN_NAME].includes('.jpg')||row[column.COLUMN_NAME].includes('.jpeg')">
                                <el-image style="width: 100px; height: 100px" :src="photo + row[column.COLUMN_NAME]"
                                    fit="contain"></el-image>
                            </div>
                            <div v-else>
                                {{row[column.COLUMN_NAME]}}
                            </div>
                        </template>
                        <!-- <template #scope="scope"> -->
                        <!-- <template v-if="scope.row[column.prop].includes('.png')||scope.row[column.prop].includes('.jpg')">
                                <el-image style="width: 100px; height: 100px" :src="photo + scope.row[column.prop]" :fit="fill"></el-image>
                            </template>
                            <template v-else>
                                <div :draggable="true" @dragstart="dragStart(scope.$index)" class="draggable-row">
                                    {{ scope.row[column.prop] }}
                                </div>
                            </template> -->
                        <!-- </template> -->
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="150">
                        <template #default="{row}">
                            <el-button size="small" type="danger" :loading="loading" @click="allocationReceive(row)">
                                接受
                            </el-button>
                            <el-button size="small" type="danger" :disabled="row.Receiver ==''"
                                @click="allocationAdd(row)">
                                处理
                            </el-button>

                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination style="margin-top: 1%;" :current-page="page.PageNumber" :page-size="page.RowAmount"
                    :page-sizes="[10, 100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper"
                    :total="Total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>


        <el-dialog :close-on-click-modal="false" v-model="dialogbforwardVisible" title="协同办理" width="800">
            <div style="display: flex;justify-content: center;">
                <div class="dia_z">

                    <!-- 滚动内容区域  default-expand-all-->
                    <div class="scroll-content">
                        <el-tree class="filter-tree" :data="treeData1"
                            :props="{ children: 'children',label:'Agensies_Name'}" @node-click="handleNodeClickUnit"
                            ref="treeunit">
                        </el-tree>

                    </div>

                </div>
                <div class="dia_y">
                    <div class="checkbox-container">
                        <!-- 顶部已选统计和清空按钮 -->
                        <!-- <div class="xuche">
                            <div>已选中&nbsp;{{ selectedCount }}&nbsp;个</div>
                            <div><el-button type="primary" icon="close" @click="clearAll">清空</el-button></div>
                        </div> -->
                        <!-- 多选框列表 -->
                        <!-- <div class="checkbox-grid"> -->
                        <el-radio-group v-model="personExecReceiver">
                            <el-radio v-for="(option, index) in checkboxOptions" :key="index"
                                :label="option.ID_Card_Number">
                                {{ option.Personal_Name }}
                        </el-radio-group>
                        <!-- </div> -->
                    </div>
                </div>
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <!-- <el-button @click="dialogFormVisible = false">取消</el-button> -->
                    <el-button type="primary" @click="MemberConfirm">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>


        <el-dialog v-model="showDialog" width="550" class="custom-dialog">
            <template #header>
                <div class="dialog-header">
                    <span>设置显示字段</span>
                </div>
            </template>
            <div class="dialog-content">
                <el-checkbox v-model="isAllChecked" @change="handleAllChecked"
                    class="full-width-checkbox">全选</el-checkbox>
                <div class="checkbox-columns">
                    <el-checkbox-group v-model="checkedFields" style="width: 100%; display: flex; flex-wrap: wrap">
                        <el-checkbox :disabled="field.COLUMN_KEY === 'PRI'" v-for="field in fields" :key="field"
                            :value="field" style="width: 50%; height: 30px; margin-right: 0px">
                            {{ field.COLUMN_COMMENT }}
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showDialog = false" class="cancel-btn">取消</el-button>
                    <el-button type="primary" @click="saveFields" class="confirm-btn">保存</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    </div>
    <script src="../../../utils/utils.js"></script>
    <script src="../../../config/config.js"></script>
    <script src="../../../utils/mixins.js"></script>
    <script src="../../../yl/vue.js"></script>
    <script src="../../../yl/index.js"></script>
    <script src="../../../yl/zh-cn.mjs"></script>
    <script src="../../../yl/index.iife.min.js"></script>
    <script src="../../../yl/jquery.min.js"></script>
    <script src="../../../utils/jquery.cookie.js"></script>
    <script src="../../../api/request.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>